<template>
  <div>
    <Header />
    <div class="main">
      <div class="content">
        <a href="#" class="book-name">
          <el-icon>
            <ArrowLeftBold />
          </el-icon>
          <h3>人們將那抹藍稱為神、希望或天空</h3>
        </a>
        <div class="articleBody">
          <h2 class="chapter-tit space-between">
            第一章 藍①
            <img @click="settingAction" src="@/assets/images/setting.png" class="setting-img" />
          </h2>
          <div class="author-info">
            <div>
              <el-avatar :size="38" />
              <div class="text">
                <a href="#">
                  <h4>佐渡遼歌</h4>
                </a>
                <p>2023.01.12 21:03</p>
              </div>
            </div>
          </div>
          <div class="text-container">
            <ul>
              <article>
                <p>
                  EROLABS工口實驗室玩家專屬！18+輕小说看到飽！ *APPLE store
                  手機限定
                </p>
                <p>★輸入專屬序號即可獲得Kado+日輕小说訂閱制７日暢讀優惠</p>

                <p>★兌換流程：</p>

                <p>1.前往兌換入口：https://kadokado.io/Ry3yD</p>

                <p>2.輸入專屬優惠碼：【KADOPLUS2025E】</p>

                <p>
                  ※僅限使用APPLE
                  手機的「Kado+新訂戶」兌換乙次，限額5,000名，兌換期限至
                  2025/08/15截止。
                </p>

                <p>※台灣角川股份有限公司&KadoKado角角者保留修改、終止、變更活動內容細節之權利。</p>

                <p>==</p>
              </article>
            </ul>
          </div>
        </div>
        <div class="chapter-selection">
          <button>上一章</button>
          <button @click="drawer = true">目录</button>
          <button>下一章</button>
        </div>
      </div>
      <div class="bottom-menu">
        <div class="menu">
          <div class="menu-left">
            <div class="menu-left-btn">
              <img src="@/assets/images/coll-cha.png" class="dianzan-img dianzan-img-2" alt />
              <!-- <el-icon :size="24"><Star /></el-icon> -->
              <span>302</span>
            </div>
            <div @click="pinglunShowAction" class="menu-left-btn">
              <!-- <el-icon :size="24"><Star /></el-icon> -->
              <img src="@/assets/images/pinglun.png" class="dianzan-img dianzan-img-2" alt />
              <span>43</span>
            </div>
            <div class="menu-left-btn">
              <!-- <el-icon :size="24"><Star /></el-icon> -->
              <img
                @click="shoucangAction"
                src="@/assets/images/wujue.png"
                class="dianzan-img dianzan-img-2"
                alt
              />
              <!-- <img @click="shoucangAction" src="@/assets/images/aixing-slecet.png" v-if="!shouShow"
              class="dianzan-img" alt="" />-->
              <span>收藏</span>
            </div>
          </div>

          <div class="dis-row">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <img src="@/assets/images/more.png" class="huiying-img more-shu" alt />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <div @click="jianjuAction">
                      <img src="@/assets/images/jianju.png" class="huiying-img" alt />
                      举报
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- <img @click="shareAction()" src="@/assets/images/share-1.png" class="dianzan-img" alt="" /> -->
            <!-- <el-popconfirm hide-icon>
              <template #reference>
                <el-button>
                  <img src="@/assets/images/more.png" class="dianzan-img dianzan-img-1" alt />
                </el-button>
              </template>

              <template #actions>
                <div class="fenxiang-box" @click="jianjuAction">
                  <img src="@/assets/images/jianju.png" class="dianzan-img dianzan-img-1" alt />
                  举报
                </div>
              </template>
            </el-popconfirm>-->
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="drawer" position="bottom" :style="{ height: '90%' }">
      <div class="mulu-1">
        <div>目录</div>
        <div>
          <div class="fenji-1-box">分集1</div>
        </div>
      </div>

      <div class="fenji-1-box-boss">
        <div v-for="(item, index) in 6" :key="index" class="zhangjie-box">
          <div class="nei-line">第一章 藍①</div>
        </div>
      </div>
    </van-popup> 

    <!-- <el-drawer
      :style="{ backgroundColor: drawerBgColor }"
      custom-class="custom-drawer"
      v-model="pinglunShow"
      direction="btt"
      :show-close="false"
      :with-header="false"
    > -->
      <van-popup   v-model:show="pinglunShow" position="bottom" :style="{ height: '90%',backgroundColor: drawerBgColor }">
      <div class="commit-title">留言评论</div>
      <div class="catalog-box catalog-box-commit-1">
        <div class="commit-content">
          <div>
            <img
              src="https://img.kadokado.cn/insecure/s:80/plain/memberId/73118/profile/3bdfaadf0ec6aeeb/blob"
              class="dianzan-img dianzan-img-3"
              alt
            />
          </div>
          <div class="space-between">
            <div class="zuiye-box">
              <div>罪夜</div>
              <div class="zuiye-time">2023.08.06 12:29</div>
            </div>
            <div>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <img src="@/assets/images/more-shu.png" class="huiying-img more-shu" alt />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <img src="@/assets/images/delete.png" class="huiying-img" alt />
                      删除评论
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="jubaoAction">
                        <img src="@/assets/images/jianju.png" class="huiying-img" alt />
                        举报
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div
          class="qishi-box"
        >其實愈看愈感覺斑鳩的形象在莉茲眼裡是「烏鴉」（明明叫斑鳩XD），文中也不時提及烏鴉的行為，感覺這生物不只是負責傳信的，哪天能變成人我都不意外（X...</div>
        <div class="show-full">展示全文</div>
        <div class="xxd-boss">
          <div v-for="(item, index) in hujiyingIndex" :key="index">
            <div class="space-between top20">
              <div @click="huiyingAction" v-if="index == 0">
                <img src="@/assets/images/arrow-down.png" class="huiying-img" alt />
                <span>1 条回复</span>
              </div>
              <div>
                <img src="@/assets/images/bakc.png" class="huiying-img" alt />
                <span>回复</span>
              </div>
            </div>

            <div class="dis-row row-info top20">
              <div>
                <img
                  src="https://img.kadokado.cn/insecure/s:80/plain/avatar/Kadokado-member-bermuda_128.svg"
                  class="info-img"
                  alt
                />
              </div>
              <div class="time-box">
                <div class="time-title space-between">
                  <div>ChristinaGraGra</div>
                  <div>
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <img src="@/assets/images/more-shu.png" class="huiying-img more-shu" alt />
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>
                            <div @click="jubaoAction">
                              <img src="@/assets/images/jianju.png" class="huiying-img" alt />
                              举报
                            </div>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
                <div class="time-data">2022.09.06 10:30</div>
              </div>
            </div>

            <div class="aite-name" v-if="index == 1">回复@Amber：</div>

            <div class="xxd-box">好想要也看看造化主XDD</div>
          </div>
        </div>
      </div>
      <div class="dis-row input-ave">
        <div>
          <img
            src="https://img.kadokado.cn/insecure/s:80/plain/avatar/Kadokado-member-cora_128.svg"
            class="btm_ave"
            alt
          />
        </div>
        <div class="input-box-box">
          <el-input class="input-box" placeholder="輸入您的留言評論..."></el-input>
        </div>
      </div>
    <!-- </el-drawer> -->
</van-popup>
    <!-- <el-dialog :show-close="false" title="分享至..." v-model="dialogTableVisible">
			<div class="fei-img-box">
				<img class="fei-img" src="https://www.kadokado.cn/static/images/Kadokado-share-Facebook_40.svg"></img>
				<img class="fei-img" src="https://www.kadokado.cn/static/images/Kadokado-share-Plurk_40.svg" alt="">
				<img class="fei-img" src="https://www.kadokado.cn/static/images/Kadokado-share-Line_40.svg" alt="">
				<img class="fei-img" src="https://www.kadokado.cn/static/images/Kadokado-share-Sinaweibo_40.svg" alt="">
			</div>
    </el-dialog>-->

    <el-dialog
      custom-class="center-title-dialog"
      :show-close="false"
      title="章节举报"
      v-model="jianjuShow"
      width="90%"
    >
      <div>
        <div>章节举报</div>
        <div class="top20">
          <div>举报理由</div>
          <div class="top10">
            <el-select placeholder="请选择">
              <el-option></el-option>
            </el-select>
          </div>
        </div>
        <div class="top20">
          <div>举报说明</div>
          <div class="top10">
            <el-input placeholder="请详细说明举报原因" type="textarea" rows="4"></el-input>
          </div>
        </div>
        <div class="top20">0 / 1000</div>
        <!-- <div class="top20">
					您所举报的內容將依<span class="tiao-kuan">创作中心服務條款</span>進行審核及後續處理
        </div>-->
        <div class="top20 info-btn">
          <el-button type="info">同意并发送</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      custom-class="center-title-dialog"
      :show-close="false"
      title="用户举报"
      v-model="yonghuJubao"
      width="90%"
    >
      <div>
        <div>用户举报</div>
        <div class="top20">
          <div>举报理由</div>
          <div class="top10">
            <el-select placeholder="请选择">
              <el-option></el-option>
            </el-select>
          </div>
        </div>
        <div class="top20">
          <div>举报说明</div>
          <div class="top10">
            <el-input placeholder="请详细说明举报原因" type="textarea" rows="4"></el-input>
          </div>
        </div>
        <div class="top20">0 / 1000</div>
        <!-- <div class="top20">
					您所举报的內容將依<span class="tiao-kuan">创作中心服務條款</span>進行審核及後續處理
        </div>-->
        <div class="top20 info-btn">
          <el-button type="info">同意并发送</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog width="90%" :show-close="false" title="阅读设定" v-model="settingShow">
      <div class="fs-text top10">文字大小</div>

      <div class="daxiao-size top10">
        <div
          class="daxiao-box"
          @click="currentAction(index)"
          :class="{ 'daxiao-box-1': currentIndex == index }"
          v-for="(item, index) in fsList"
          :key="index"
        >{{ item.title }}</div>
      </div>

      <div class="top10">繁简喜好</div>

      <div class="top10">
        <el-checkbox>启用自动繁简转换</el-checkbox>
      </div>

      <div class="daxiao-size top10">
        <div class="daxiao-box">繁体</div>
        <div class="daxiao-box">简体</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";

import Header from "../components/Header.vue";
import { Search, ArrowLeftBold, Star } from "@element-plus/icons-vue";

const shouShow = ref(false);
const drawerBgColor = ref("#F7FAFC");
const popover1 = ref(null);
const drawer = ref(false);
const pinglunShow = ref(false);
const dialogTableVisible = ref(false);
const jianjuShow = ref(false);
const settingShow = ref(false);
const currentIndex = ref(0);
const commitDetailsShow = ref(true);
const hujiyingIndex = ref(1);
const yonghuJubao = ref(false);
const jubaoAction = () => {
  yonghuJubao.value = true;
};
const currentAction = index => {
  currentIndex.value = index;
};

const huiyingAction = () => {
  commitDetailsShow.value = false;
  hujiyingIndex.value = 3;
};
const fsList = ref([
  {
    title: "小"
  },
  {
    title: "中"
  },
  {
    title: "大"
  }
]);
const settingAction = () => {
  settingShow.value = true;
};
const jianjuAction = () => {
  jianjuShow.value = true;
};

const shoucangAction = () => {
  if (shouShow.value) {
    shouShow.value = false;
  } else {
    shouShow.value = true;
  }
};
const pinglunShowAction = () => {
  pinglunShow.value = true;
};

const shareAction = () => {
  dialogTableVisible.value = true;
};
</script>

<style lang="scss" scoped>
.aite-name {
  color: #ff8674;
}

.daxiao-box {
  border: 1px #e5e5e5 solid;
  border-radius: 10px;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  margin-left: 10px;
}

.daxiao-box:nth-of-type(1) {
  margin-left: 0;
}

.daxiao-box-1 {
  color: #ff8674;
  border: 1px #ff8674 solid;
}

.daxiao-size {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  margin: 10px 0;
}

::v-deep .el-popconfirm__icon {
  display: none !important;
}

/* Vue 2 (Element UI) */
.center-title-dialog .el-dialog__title {
  display: block;
  text-align: center;
  width: 100%;
}

.info-btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.tiao-kuan {
  color: #ff8674;
  margin: 0 0.2rem;
  text-decoration: underline;
}

.fenxiang-box {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5rem 0;
}

.fei-img-box {
  margin-top: 1rem;
  display: inline-flex;
  width: 100%;
  justify-content: center;

  .fei-img {
    width: 3rem;
    margin-left: 2rem;
  }
}

.input-box-box {
  width: 100%;
}

.input-box {
  width: 100%;
}

.btm_ave {
  width: 2rem;
  margin-right: 1rem;
}

.input-ave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 5%;
  background-color: white;
  padding-bottom: 1rem;
}

:deep(.custom-drawer) {
  background-color: #f5f7fa !important;
}

.xxd-boss {
  margin-bottom: 100px;
}

.xxd-box {
  font-size: 14px;
  color: #2d3748;
  margin-top: 1rem;
}

.time-box {
  width: 100%;
}

.time-title {
  font-size: 16px;
  width: 77vw;
}

.time-data {
  color: #1a202c;
  font-size: 12.8px;
  margin-top: 0.6rem;
}

.info-img {
  width: 3rem;
  margin-right: 1rem;
  margin-top: 0.2rem;
}

.huiying-img {
  width: 1rem;
  margin-right: 0.3rem;
}

.commit-title {
  background-color: white;
  padding: 1rem 0;
  text-indent: 1rem;
}

.qishi-box {
  margin-top: 1rem;
  line-height: 2em;
  color: #2d3748 !important;
  font-size: 0.9rem;
}

.commit-content {
  display: inline-flex;
  margin-top: 1rem;
  width: 100%;
  align-items: center;

  img {
    border-radius: 50%;
    width: 2rem;
    // margin-right: 1rem;
  }
}

.catalog-box-commit-1 {
  padding: 0 5%;
  background-color: #f7fafc;
}

.show-full {
  text-align: right;
  width: 100%;
  color: #718096;
  font-size: 0.8rem;
}

.main {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-width: 100%;

  .content {
    width: 100%;
    max-width: 61.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 4rem;

    .book-name {
      position: fixed;
      z-index: 2;
      display: flex;
      align-items: center;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: #fff;
      top: 4rem;

      :deep(.el-icon) {
        height: 3rem;
        width: 3rem;
      }

      h3 {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #2d3748;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    .articleBody {
      margin-top: 70px;

      .setting-img {
        width: 25px;
        height: 25px;
        margin-top: 3px;
      }

      .chapter-tit {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #1a202c;
        word-break: break-word;
      }

      .author-info {
        padding-top: 1rem;
        padding-bottom: 2rem;

        div {
          display: grid;
          gap: 1rem;
          grid-template-columns: auto 1fr;
          -webkit-box-align: center;
          align-items: center;
        }

        .text {
          display: flex;
          gap: 0;
          flex-direction: column;
          align-items: flex-start;

          h4 {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 2;
            letter-spacing: 0.05em;
            color: #2d3748;
          }

          p {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.625;
            letter-spacing: 0.05em;
            color: #718096;
          }
        }
      }

      .text-container {
        ul {
          font-size: 1rem;
          font-weight: 400;
          line-height: 2;
          letter-spacing: 0.05em;
          color: #2d3748;

          p {
            padding-bottom: 1rem;
            white-space: pre-wrap;
            word-break: break-all;
            line-height: 1.625em;
            min-height: 2.625em;
            font-size: 1rem;
          }
        }
      }
    }

    .chapter-selection {
      display: flex;
      justify-content: space-between;
      gap: 1rem;

      button {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.05em;
        padding: 0.5rem 1rem;
        background-color: #ffffff;
        color: #2d3748;
        display: flex;
        align-items: center;
        flex: 1 1 0%;
        gap: 0.5rem;
        height: 4rem;
        border-width: 1px;
        border-style: solid;
        border-color: #edf2f7;
        box-shadow: rgba(203, 213, 224, 0.3) 0px 0px 0.5rem 0px;
        border-radius: 0.5rem;
        justify-content: center;
        border: none;
      }
    }
  }

  .bottom-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #ffffff;
    display: flex;
    position: fixed;
    bottom: 0rem;
    width: 100%;
    height: 4rem;
    z-index: 2;
    box-shadow: 0px 0px 2rem 0px rgba(203, 213, 224, 0.3);

    .menu {
      position: relative;
      width: 100%;
      max-width: 61.5rem;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
      display: inline-flex;
      justify-content: space-between;

      .menu-left {
        flex-grow: 1;
        display: inline-flex;

        button {
          margin-left: 2rem;
          display: inline-flex;
          align-items: center;
        }

        button:nth-of-type(1) {
          margin-left: 0;
        }
      }

      button {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        flex-direction: column;
        max-width: 4.375rem;
        cursor: pointer;
        border: none;
        line-height: 1;
        font-size: 13px;
        background: transparent;

        span {
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 1.625;
          letter-spacing: 0.05em;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          display: block;
          color: #2d3748;
          text-align: center;
        }
      }
    }
  }
}

:deep(.el-drawer) {
  margin: 0px auto;
  min-width: 0px;
  display: flex;
  flex-flow: column;
  max-height: calc(100% - 4rem);
  width: 100%;
  max-width: 32rem;
  background-color: #fff;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
  min-height: 50vh !important;
  padding-bottom: 0rem;
  // height: auto !important;
}
:deep(.el-splitter-panel) {
  flex-basis: 70% !important;
}

:deep(.el-drawer__body) {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.catalog-box {
  .content {
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow-y: auto;

    .tit {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.5rem;
      cursor: default;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.05em;
      color: #2d3748;
      margin-bottom: 1rem;
      position: absolute;
      width: 100%;
      background: #fff;
      padding: 1rem;
    }

    .list {
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: #2d3748;
      line-height: 3rem;
      text-overflow: ellipsis;
      overflow-y: scroll;
      white-space: nowrap;

      li {
        padding-left: 1rem;
        padding-right: 1rem;
        border-color: #edf2f7;
        border-bottom: 0.0625rem solid #edf2f7;

        div {
          padding: 0.25rem 1rem;
          display: flex;
          gap: 0.5rem;
          -webkit-box-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          align-items: center;

          span {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: #2d3748;
            padding-left: 1rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 2.25rem;
          }
        }
      }
    }
  }
}

.dianzan-img-1 {
  // margin-left: 1rem;
  width: 1.3rem;
}

.dianzan-img {
  // min-width: 48px;
  // min-height: 48px;
  margin-right: 0.2rem;
}

.dianzan-img-2 {
  width: 1.3rem;
  // height: 18px;
}

.menu-left-btn {
  display: inline-flex !important;
  align-items: center;
  flex-direction: row;
  margin-left: 1rem;
}

.menu-left-btn:nth-of-type(0) {
  margin-left: 0;
}

.zuiye-time {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.mulu-1 {
  width: 100%;
  padding: 1rem 4%;
}

.zhangjie-box {
  // padding: 0.6rem ;
  border-bottom: 1px #e5e5e5 solid;
  padding: 0.6rem 0;
}

.fenji-1-box {
  margin: 1rem 0;
  margin-left: 0%;
}

.zhangjie-box:nth-of-type(1) {
  color: #ff8674 !important;
}

.nei-line {
  width: 86%;
  margin-left: 7%;
}

.fenji-1-box-boss {
  margin-top: -1.5rem;
}

.zuiye-box {
  margin-left: 15px;
}

.more-shu {
  width: 1.3rem !important;
}

.dianzan-img-3 {
  width: 48px !important;
  height: 48px !important;
}
</style>